```jsx
import * as signaturePad from "@zag-js/signature-pad"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function SignaturePad() {
  const service = useMachine(signaturePad.machine, {
    id: createUniqueId(),
  })

  const api = createMemo(() => signaturePad.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <label {...api().getLabelProps()}>Signature Pad</label>

      <div {...api().getControlProps()}>
        <svg {...api().getSegmentProps()}>
          {api().paths.map((path, i) => (
            <path key={i} {...api().getSegmentPathProps({ path })} />
          ))}
          {api().currentPath && (
            <path {...api().getSegmentPathProps({ path: api().currentPath })} />
          )}
        </svg>

        <button {...api().getClearTriggerProps()}>X</button>

        <div {...api().getGuideProps()} />
      </div>
    </div>
  )
}
```
